<template>
	<textarea
			class="bear-TextareaAutoHeight"
			:style="{height:height}"
			:value="realValue"
			v-bind="$attrs"
			@input.passive="$_bear_inputFn"
			v-on="listeners">
	</textarea>
</template>

<script>
	// eslint-disable-next-line no-unused-vars
	/* global utils */
	/**
	 * @author 唐国雄
	 * 根据输入内容,自动适应高度的文本域
	 * 注意左右padding至少设1px,否则ie和edge的高度计算scrollHeight会出错
	 * 方法----------------------
	 * autoHeight()		重新计算高度
	 */
	export default{
		name:'TextareaAutoHeight',
		props:{
			value:[String,Number]
		},
		data(){
			return {
				realValue:this.value,
				height:'0'
			};
		},
		computed:{
			listeners(){
				const listeners=Object.assign({},this.$listeners);
				delete listeners.input;
				return listeners;
			}
		},
		watch:{
			value(val){
				this.realValue=val;
			},
			realValue(){
				this.$nextTick(function(){
					this.autoHeight();
				});
			}
		},
		mounted(){
			this.autoHeight();
		},
		methods:{
			$_bear_inputFn(e){
				const value=e.target.value;
				this.realValue=value;
				this.$emit('input',value);
			},
			autoHeight(){
				const target=this.$el;
				const style=getComputedStyle(target);
				const borderHeight=parseInt(style.borderTopWidth)+parseInt(style.borderBottomWidth);
				this.height='0';
				this.$nextTick(function(){
					this.height=this.$el.scrollHeight+borderHeight+'px';
				});
			}
		}
	};
</script>

<style lang="scss">
	.bear-TextareaAutoHeight{
		padding:7px 10px;
		line-height:19px;
		outline:0;
		resize:none;
		font-size:15px;
		overflow:hidden;
		vertical-align:top;
	}
</style>
